<template>
    <view class="todos-content-box">
        <view class="header">
            <input class="new-todo" v-model="input" placeholder="添加任务" @confirm="addTodoHandle">
            <image class="plus" v-show="input.length > 0" @click="addTodoHandle" src="@/static/images/yes.png"></image>
        </view>
        <template v-if="todos.length > 0">
            <view class="footer">
                <image class="btn" @click="toggleAllHandle" src="@/static/images/allSelect.png"></image>
                <text class="footText" v-show="leftCount > 0">剩{{ leftCount }}个任务待完成</text>
                <image class="btn" v-show="todos.length > leftCount" @click="clearCompletedHandle"
                       src="@/static/images/delete.png"></image>
            </view>
            <view class="todos">
                <view v-for="(item,index) in todos" :key="item.id" class="item" :class="{'completed':item.completed}"
                      @click="toggleHandle(index)">
                    <uni-icons class="checkbox" :size="20" :type="item.completed ? 'checkbox-filled' : 'circle'"></uni-icons>
                    <text class="name">{{ item.name }}</text>
                    <uni-icons type="clear" :size="20" class="remove" @click.native.stop="removeTodoHandle(index)"></uni-icons>
                </view>
            </view>
        </template>
        <template v-else>
            <view class="noData">
                <image class="noData-image" src="@/static/images/nodata.png"></image>
                <text class="noData-text">今天的任务都完成了</text>
            </view>
        </template>
        <uni-popup ref="popup" type="message">
            <uni-popup-message type="success" message="删除成功" :duration="1000"></uni-popup-message>
        </uni-popup>
    </view>

</template>

<script>
import {uniPopup,uniPopupMessage,uniIcons} from '@dcloudio/uni-ui';

export default {
    name: "todos",
    components:{uniPopup,uniPopupMessage,uniIcons},
    data() {
        return {
            input: "",
            todos: [],
            allCompleted: false,
            logs: [],
        }
    },
    onLoad(){
        this.load();
    },
    computed:{
        leftCount(){
            return this.todos.filter(item => {return !item.completed}).length;
        }
    },
    onShareAppMessage: function (from) {
        if (from === 'button') {
            return {
                title: '管理时间，保持专注！让自律成为习惯！',
                path: '/pages/index/index',
                imageUrl: '/image/share.jpg' //不设置则默认为当前页面的截图
            }
        }
    },
    methods: {
        addTodoHandle() {
            if (!this.input || !this.input.trim()){
                return false;
            }
            const todo = {name: this.input, completed: false,id:new Date().getTime()+Math.floor(Math.random(0,1)*100)};
            this.todos.push(todo);
            this.save();
            this.input = '';
        },
        toggleAllHandle(index) {
            const todos = this.todos;
            todos.forEach(item => {
               item.completed = !item.completed;
            });
            this.save();
            uni.vibrateShort();
        },
        toggleHandle(index) {
            const todos = this.todos;
            todos[index].completed = !todos[index].completed;
            this.save();
        },
        removeTodoHandle(index){
            this.todos.splice(index,1);
            this.save();
        },
        clearCompletedHandle() {
            const todos = this.todos;
            this.todos = todos.filter(item => {
                return !item.completed;
            })
            this.save();
            this.$refs.popup.open();
            uni.vibrateShort();
        },
        load(){
            this.todos = uni.getStorageSync('todo_list') || [];

        },
        save(){
            uni.setStorageSync('todo_list',this.todos);
        }
    }

}
</script>

<style scoped>
@import "todos.css";
</style>